<!-- Dialog with Form Elements -->
<button data-target="#form-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">Form Modal</button>
<div tabindex="-1" class="modal fade" id="form-dialog" style="display: none;" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header pmd-modal-bordered">
				<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
				<h2 class="pmd-card-title-text">Form Modal</h2>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<div class="form-group pmd-textfield pmd-textfield-floating-label">
						<label for="first-name">Name</label>
						<input type="text" class="mat-input form-control" id="name" value="">
						<span class="help-text">Input is required!</span> </div>
					<div class="form-group pmd-textfield pmd-textfield-floating-label">
						<label for="first-name">Email Address</label>
						<input type="text" class="mat-input form-control" id="email" value="">
					</div>
					<div class="form-group pmd-textfield pmd-textfield-floating-label">
						<label for="first-name">Mobile No.</label>
						<input type="text" class="mat-input form-control" id="mobil" value="">
					</div>
					<div class="form-group pmd-textfield pmd-textfield-floating-label">
						<label class="control-label">Message</label>
						<textarea required class="form-control"></textarea>
					</div>
					<label class="checkbox-inline pmd-checkbox pmd-checkbox-ripple-effect">
						<input type="checkbox" value="">
						<span class="pmd-checkbox"> Accept Terms and conditions</span> </label>
				</form>
			</div>
			<div class="pmd-modal-action">
				<button data-dismiss="modal"  class="btn pmd-ripple-effect btn-primary" type="button">Save changes</button>
				<button data-dismiss="modal"  class="btn pmd-ripple-effect btn-default" type="button">Discard</button>
			</div>
		</div>
	</div>
</div>

<!-- List selection -->
<button data-target="#list-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">List with Selection</button>
<div tabindex="-1" class="modal fade" id="list-dialog" style="display: none;" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header pmd-modal-bordered"> 
				<h3 class="pmd-card-title-text">List Selection</h3>
			</div>
			<div class="modal-body">
				<div class="radio">
					<label class="pmd-radio">
						<input type="radio" name="inlineRadioOptions" id="Ahmedabad" value="option1">
						<span for="Ahmedabad">Ahmedabad</span> </label>
				</div>
				<div class="radio">
					<label class="pmd-radio">
						<input type="radio" name="inlineRadioOptions" id="Surat" value="option1">
						<span for="Surat">Surat</span> </label>
				</div>
				<div class="radio">
					<label class="pmd-radio">
						<input type="radio" name="inlineRadioOptions" id="Rajkot" value="option1">
						<span for="Rajkot">Rajkot</span> </label>
				</div>
				<div class="radio">
					<label class="pmd-radio">
						<input type="radio" name="inlineRadioOptions" id="Vadodara" value="option1">
						<span for="Vadodara">Vadodara</span> </label>
				</div>
				<div class="radio">
					<label class="pmd-radio">
						<input type="radio" name="inlineRadioOptions" id="Mehsana" value="option1">
						<span for="Mehsana">Mehsana</span> </label>
				</div>
			</div>
			<div class="pmd-modal-action pmd-modal-bordered text-right">
				<button data-dismiss="modal"  class="btn pmd-ripple-effect btn-primary pmd-btn-flat" type="button">Ok</button>
				<button data-dismiss="modal"  class="btn pmd-ripple-effect btn-default pmd-btn-flat" type="button">Cancel</button>
			</div>
		</div>
	</div>
</div>
